import React from 'react'

class ClassComp extends React.Component{

  constructor(){
    super()
    
  // 定义模型
  // state：状态&数据 放在state 中的数据将来才具有响应式特性
    this.state={
      name:'wy',
      age:18
    }
    // 好处，绑定只会执行一次
    this.change=this.change.bind(this)
  }
  
  // 实例方法(需要绑定this)
  change(){
    console.log('--change--',this)
    this.setState({
      name:'zpj-change2',
      age:24
    })
  }

  change3=(e,name,age)=>{
    console.log('--e---',e,name,age)
    this.setState({
      name:'老三',
      age:16
    },()=>{
      console.log(this.state)
    })
  }

// 渲染函数 ，里面返回jsx （就是渲染的视图）
  render(){
    return<div>
      <p>
        name is {this.state.name} {''}<br/> age is {this.state.age}
      </p>
      <p>
        <button onClick={()=>{
          this.setState({
            name:'czy-change1',
            age:26
          },
          ()=>{
            console.log(this.state)
          })
        }}>
          change1
        </button>
      </p>

      <p>
        {/* <button onClick={this.change.bind(this)}>change2</button> */}
        <button onClick={this.change}>change2</button>
      </p>
      <p>
        <button onClick={e=>{console.log('-onClick-');this.change3(e,'王五',36)}}>change3</button>
      </p>
        </div>
      
  }
}
export  default ClassComp